<template>
    <div>
         <el-carousel trigger="click" height="360px">
      <el-carousel-item v-for="item in xlList" :key="item">
        <div class="swiper">
            <img  @click="goDetail(item.id)" :src="item.img" alt="" style="width:100%;height:360px">
            <span>销量:{{item.xiaoliang}}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
        <div class="header">
        
            <div v-for="v in typeList" :key="v.id" :class="{cur:v.id==curId}" @click='changeList(v.id)'>
{{v.name}}
            </div>
        </div>
        <div style='margin-top:20px;padding-left:20px'>
        <el-input v-model="title" placeholder="请输入商品名称" style='width:200px;margin-right:20px'></el-input>
        <el-button type="primary" @click='getList'>搜索</el-button>
        </div>
        <div class="list" >
            <div v-for="v in list" :key="v.id" >
             <div @click="goDetail(v.id)">
                <img :src="v.img" alt="" style="width:100%;height:200px;border-radius:10px">
                   <div>标题:{{v.title}}</div>
                <div>价格:
                    <span :class="{shanchu:$store.state.user.zhekou}">{{v.price}}</span>
                    <span style="color:red" v-if='$store.state.user.zhekou'> 会员: {{($store.state.user.zhekou*v.price*0.1).toFixed(2)}}</span>
                  
                </div>
                <div>分类:{{v.typeName}}</div>
                <div>销量:{{v.xiaoliang}}</div>
                <div>库存:{{v.kucun}}</div>
                <div>到期时间:{{v.daoqiTime}}</div>
             </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                typeList: [],
                curId:null,
                list:[],
                xlList:[],
                title:''
            }
        },
        mounted () {
            this.getType();
            this.getxiaoliang()
        },
        methods: {
         
            getxiaoliang(){
                api.xiaoliang().then(res=>{
                    this.xlList=res.data
                    console.log(res);
                })
            },
            goDetail(id){
                this.$router.push("/xiangqing?id="+id)
            },
            changeList(id){
                this.curId=id
                this.getList()
            },
            getType() {
                api.gettyperList({page:1,size:99}).then(res=>{
                    console.log(111,res);
this.typeList=res.data.list
this.typeList.unshift({name:'全部分类',id:null})
this.curId=this.typeList[0].id
this.getList()
                })
            },
             getList(){
            api.getproductList({typeId:this.curId,status:1,page:1,size:99,title:this.title}).then(res=>{
                this.list=res.data.list
                console.log(222,res);
            })
        }
        },
       
    }
</script>

<style lang="scss" scoped>
.swiper{
    position: relative;
    span{
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
        font-size: 22px;
    }
}
.shanchu{
      text-decoration: line-through;
}
.list{
    *{
              box-sizing: border-box !important;
    }
    margin-top: 20px;
    display: flex;flex-wrap: wrap;
    >div{
  
        padding: 20px;
        width: 25%;
        >div{
            &:hover{
                background-color: #eee;
            }
            cursor: pointer;
            padding: 20px;
            border: 1px solid gray;
            border-radius: 20px;
            >div{
                font-size: 16px;
                line-height: 26px;
                height: 26px;
            }
        }
    }
}
.header{
    display: flex;
    background-color: blue;
    padding: 18px;
    >div{
        cursor: pointer;
        color: white;
        font-size: 15px;
        margin-right: 20px;
        &.cur{
            color: aqua;
        }
    }
}
</style>